<template>
  <div class="exchange-out h100">
    <div class="exchange flex-col h100" v-if="isWx">
      <img :class="'top-image w100 top-image-' + !!topImage" :src="topImage"/>
      <div class="input-blo flex-col aic jcb">
        <img class="input-blo-title" src="../../images/pay/title_duihuan.png"/>
        <div class="input-blo-inner jcb w100 flex">
          <input type="text" class="input-blo-inner_inner bsb" v-model.trim="code"/>
          <span class="input-blo-inner-btn flex jcc aic" @click="toExChange">马上兑换</span>
        </div>
      </div>
      <div class="no-data flex-col flex-1 aic jcc" v-if="!exChangeList.length">
        <img src="../../images/pay/icon_kongzt.png" class="no-data-img"/>
        <div class="mt20 no-data-tip">暂无兑换记录</div>
      </div>
      <div class="ex-list ova flex-1" v-else>
        <div class="exchange-item w100 flex-col" v-for="(item, i) in exChangeList" :key="i">
          <div :class="'flex w100 aic date-title date-title-' + item.dateFirst" @click="callback(item)">
            <span class="date">{{item.dateTitle}}</span>
            <span :class="'arrow ' + item.showItem"></span>
          </div>
          <div :class="'flex ovh item-inner item-inner-' + !!item.showItem">
            <img class="item-icon" src="../../images/pay/ico_vip_duihuan.png"/>
            <div class="item-text flex-col jcb flex-1 bsb">
              <div class="item-detail flex aic jcb">
                <div class="item-detail-left flex-col">
                  <span class="item-name">{{item.typename}}</span>
                  <span class="item-exchange-code">兑换码：{{item.name}}</span>
                </div>
                <span :class="'item-detail-right item-detail-right-' + item.status">{{item.statusString}}</span>
              </div>
              <span class="item-date-time">{{item.timeString}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="exChangeMain h100">
      <div class="nav-input">
        <input type="text"
               v-model.trim="exCode"
               class="inpTxt"
               placeholder="请输入兑换码">
        <button class="inpBtn"
                @click="toExChange">兑换
        </button>
      </div>
      <div v-if="exChangeList.length"
           class="excBox">
        <p class="nav-blod">兑换记录</p>
        <span class="nav-sm">(兑换成功的会员卡期限将自动叠加到当前账号哦~)</span>
        <div class="excUl">
          <div v-for="(item,index) in exChangeList"
               :key="index"
               class="excLi">
            <div class="left">
              <span>已兑换</span>
            </div>
            <div class="right">
              <p class="top">{{item.typename}}</p>
              <p class="bot">兑换时间：{{util.formatTime(item.updatetime || item.createtime)}}</p>
              <!-- <p class="top">同步小学课堂-7天VIP体验卡</p>
              <p class="bot">兑换时间：2020年02月17日 18:25:23</p> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex';

  export default {
    computed: {
      ...mapGetters(['userInfo', 'productInfo', 'isWx'])
    },
    data() {
      return {
        exCode: '',
        code: '',
        page_code: 'tbxxkt_h5_yjdh',
        topImage: '',
        exChangeList: []
      };
    },
    created() {
      this.getExChangeList();
      this.isWx && this.getTopImage();
    },
    methods: {
      getTopImage() {
        this.http.$post('api/page.page/page_info', {
          page_code: this.page_code,
          product_id: this.productInfo.product_id,
          terminal_id: this.productInfo.terminal_id,
          channel_id: this.productInfo.channel_id
        }).then(res => {
          // console.log(res);
          if (res && res.page_info && res.page_info.area && res.page_info.area.length) {
            let element = res.page_info.area[0].element[0];
            this.topImage = element.cover_img1 || element.cover_img2;
          }
        }).catch(console.log);
      },

      callback(detail) {
        let bool = !detail.showItem;
        console.log(detail);
        this.exChangeList.filter(e => e.dateTitle === detail.dateTitle).forEach(e => {
          e.showItem = bool;
        });
      },

      getExChangeList() {
        this.http
          .$post('api/price.product/get_user_cards', {
            uid: this.userInfo.uid,
            product_id: this.productInfo.product_id
          })
          .then(res => {
            //   console.log(res)
            if (this.isWx) {
              let dates = [];
              this.exChangeList = res.list.map(e => {
                e.dateTitle = this.util.formatTime(e.updatetime, 'Y年MM月');
                e.timeString = this.util.formatTime(e.updatetime);
                e.statusString = ['', '', '兑换成功'][e.status] || e.status;
                e.showItem = true;
                e.dateFirst = false;
                if (!dates.includes(e.dateTitle)) {
                  dates.push(e.dateTitle);
                  e.dateFirst = true;
                }
                return e;
              });
            } else {
              this.exChangeList = res.list;
            }
          })
          .catch(this.$err);
      },
      toExChange() {
        if (!this.exCode && !this.code) {
          return this.$toast.fail('请输入兑换码');
        }
        this.http
          .$post('api/price.product/use_card', {
            code: this.exCode || this.code,
            uid: this.userInfo.uid,
            product_id: this.productInfo.product_id,
            //   course_id:
            type: 1
          })
          .then(res => {
            //   console.log(res)
            this.util.getUserInfoApi().catch(console.log);
            this.exCode = '';
            this.code = '';
            this.$notify({
              type: 'success',
              background: '#07c160',
              duration: 1500,
              message: '兑换成功'
            });
            this.getExChangeList();
          })
          .catch(this.$err);
      }
    }
  };
</script>
<style lang="less" scoped>
  .exChangeMain {
    padding: 1.06rem 1rem 0 1rem;
    background: rgba(235, 235, 235, 1);
    box-sizing: border-box;
    .nav-input {
      padding: 1.63rem 0.75rem;
      height: 2.19rem;
      line-height: 2.19rem;
      background-color: #fff;
      position: relative;
      .inpTxt {
        text-indent: 1.09rem;
        width: 15.44rem;
        height: 2.29rem;
        line-height: 2.29rem;
        background: rgba(235, 235, 235, 1);
        border-radius: 1rem;
        margin-right: 0.75rem;
        &::placeholder {
          font-size: 0.94rem;
          color: #adaaac;
        }
      }
      .inpBtn {
        color: #fff;
        width: 3.75rem;
        height: 2.45rem;
        line-height: 2.45rem;
        text-align: center;
        margin-bottom: -0.2rem;
        background: url('../../images/exchange/icon_duihuan.png') no-repeat;
        background-size: 100% 112%;
        font-size: 1.06rem;
        position: absolute;
        top: 1.41rem;
      }
    }
    .excBox {
      margin-top: 1rem;
      font-size: 14px;
      height: 30rem;
      background-color: #fff;
      padding: 1.03rem 0.72rem;
      box-sizing: border-box;
      .nav-blod {
        color: rgba(51, 51, 51, 1);
        font-size: 1rem;
        font-weight: 600;
      }
      .nav-sm {
        font-size: 0.81rem;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
      .excUl {
        height: 26rem;
        overflow: scroll;
      }
      .excLi {
        width: 19.94rem;
        height: 3.63rem;
        background: url('../../images/exchange/img_tu.png') no-repeat;
        background-size: 100% 100%;
        position: relative;
        margin-top: 1.06rem;
        color: rgba(255, 255, 255, 1);
        overflow: hidden;
        .left {
          line-height: 3.63rem;
          position: absolute;
          width: 4.34rem;
          text-align: center;
          font-size: 0.88rem;
          font-weight: 400;
        }
        .right {
          position: absolute;
          left: 4.34rem;
          width: 15.69rem;
          margin-left: 1rem;
          .top {
            font-size: 0.88rem;
            font-weight: 500;
            margin: 0.84rem 0 0.44rem 0;
          }
          .bot {
            font-size: 0.63rem;
            font-weight: 400;
            line-height: 0.2rem;
            opacity: 0.6;
          }
        }
      }
    }
  }

  .exchange {
    .top-image {
      &-true {
        border-bottom: 10px solid #f1efed;
        height: 170px;
      }
      &-false {
        border-bottom: 0;
        height: 0;
      }

    }
    .input-blo {
      padding: 16px;
      /* height: 350px; */
      background-color: #fff;
      &-title {
        width: 120.5px;
        height: 15px;
        margin-bottom: 16px;
      }
      &-inner {
        &_inner {
          padding: 0 20px;
          width: 248px;
          height: 40px;
          font-size: 16px;
          color: #333;
          background-color: #f8f7f5;
          border-radius: 20px;
          border: 1px solid #d0cecb;
        }
        &-btn {
          width: 85px;
          height: 40px;
          color: #fff;
          font-size: 14px;
          background-color: #ff9961;
          border-radius: 20px;
        }
      }
    }
    .no-data {
      border-top: 10px solid #f1efed;
      &-img {
        width: 45%;
      }
      &-tip {
        color: #a5a5a5;
        font-size: 14px;
      }
    }
  }

  .exchange-item {
    .date-title {
      padding: 0 17px;
      height: 42px;
      background-color: #f1efed;

      .date {
        margin-right: 5px;
        color: #888;
        font-size: 13px;
      }
      .arrow {
        margin-left: 4px;
        width: 10px;
        height: 10px;
        border: 1px solid #888;
        border-top: 0;
        border-left: 0;
        transform: translateY(-25%) rotate(45deg);
        &.true {
          transform: translateY(25%) rotate(-135deg);
        }
      }
      &-false {
        display: none;
      }
    }
    .item- {
      &inner {
        background-color: #fff;
        &-false {
          height: 0;
        }
        &-true {
          padding: 16px 0 0 16px;
        }
      }
      &icon {
        margin-right: 6px;
        width: 60px;
        height: 60px;
      }
      &detail {
        &-right {
          font-size: 13px;
          &-2 {
            color: #ffb837;
          }
        }
      }
      &name {
        margin-bottom: 5px;
        color: #333;
        font-size: 15px;
        line-height: 15px;
      }
      &exchange-code {
        font-size: 12px;
        line-height: 12px;
        color: #999;
      }
      &text {
        padding: 0 16px 16px 0;
        border-bottom: 1px solid #eee;
        height: 76px;
      }
      &date-time {
        color: #b4b4b4;
        font-size: 10px;
        line-height: 10px;
      }
    }
  }
</style>
